<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Demo 首页</title>

    <%--<!-- 新 Bootstrap 核心 CSS 文件 -->--%>
    <%--<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">--%>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body onbeforeunload="checkLeave()">

<style type="text/css">
    html, body {
        height: 100%;
        padding: 0;
        margin: 0;
    }

    #leftSend {
        padding: 0px;
        height: 500px;
    @import
    }

    #connect-container div {
        padding: 5px;
    }

    #console-container {
        float: left;
        width: 100%;
    }

    #console {
        border: 1px solid #CCCCCC;
        border-right-color: #999999;
        border-bottom-color: #999999;
        height: 423px;
        width: 100px;
        overflow-y: scroll;
        padding: 5px;
        width: 100%;
    }

    #pop_console {
        border: 1px solid #CCCCCC;
        border-right-color: #999999;
        border-bottom-color: #999999;
        height: 423px;
        width: 100px;
        padding: 5px;
        width: 100%;
    }

    #console p {
        padding: 0;
        margin: 0;
    }

    .pop_item {
        background-color: #c4e3f3;
        height: 28px;
        border: 1px solid #CCCCCC;
        border-radius: 2px;
        margin: 3px;
    }

    .pop_item div {
        float: left;
        margin: 3px;
        max-width: 90%;
        word-break:keep-all;           /* 不换行 */
        white-space:nowrap;          /* 不换行 */
        overflow:hidden;               /* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow:ellipsis;         /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
    }

    .pop_item button {
        float: right;
        padding-left: 2px;
    }
    .pop_item button span{
        font-size: x-small;
        padding: 0 0 0 .1875rem;
    }



</style>


<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <h3 style="float:left">
                IPE直播
            </h3>
            <form:form style="float:right;padding-top:20px" action="/logout" method="post" commandName="user"
                       role="form">
                <button style="float: right" type="submit" class="form-group">
                    注销
                </button>
                <li style="float: right;margin-top: 4px;padding-right: 10px">${username}</li>
            </form:form>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-8 column" style="padding: 0px">

            <script type="text/javascript" src="/player/swfobject.js"></script>
            <div class="video" id="CuPlayer"> <b> /> 网页视频播放器加载中，请稍后...</b> </div>
            <script type="text/javascript">
            var so = new SWFObject("/player/player.swf?v=2.5","ply","760","500","9","#000000");
            so.addParam("allowfullscreen","true");
            so.addParam("allowscriptaccess","always");
            so.addParam("wmode","opaque");
            so.addParam("quality","high");
            so.addParam("salign","lt");
            <!-- HTML代码参数/Begin -->
            so.addVariable("JcScpServer","rtmp://localhost/player"); //服务器地址
            so.addVariable("JcScpVideoPath","test"); //发布点名称
            <!-- HTML代码参数/End -->
            so.write("CuPlayer");
            </script>

        </div>
        <div id="leftSend" class="col-md-4 column">

            <ul id="myTab" class="nav nav-tabs">
                <li class="active"><a href="#pop" data-toggle="tab">冒泡</a></li>
                <li><a href="#chat" data-toggle="tab">聊天室</a></li>
            </ul>

            <div id="myTabContent" class="tab-content">

                <div id="pop" class="tab-pane fade in active">
                    <div id="pop_console"></div>
                    <div class="input-group">
                        <input id="pop_message" type="text" class="form-control" placeholder="每五分钟限定一条建议">
                        <span class="input-group-btn">
                        <button id="pop_echo" class="btn btn-default" type="button" onclick="pop_echo()">建议</button>
                    </span>
                    </div>
                </div>

                <div id="chat" class="tab-pane fade">
                    <div id="console-container">
                        <div id="console"></div>
                    </div>
                    <div class="input-group">
                        <input id="message" type="text" class="form-control">
                        <span class="input-group-btn">
                        <button id="echo" class="btn btn-default" type="button" onclick="echo()">发送</button>
                    </span>
                    </div><!-- /input-group -->
                </div>
            </div>


        </div>
    </div>
</div>

<script type="text/javascript" src="/js/live/liveMain.js"></script>

</body>
</html>